---
import table from "@/assets/formula/smithing.png";
import SingleItem from "./components/SingleItem.astro";
import type { SmithingFormula } from "@/types/formula";
import useIcon from "@/hooks/useIcon";
import { Image } from "astro:assets";
import { AstroError } from "astro/errors";

export interface Props {
  formula: SmithingFormula;
  alt?: string;
}

const {
  formula: { result, addition, base },
  alt = "合成配方",
} = Astro.props;

const resultIcon = useIcon(result.item)!;

if (!resultIcon) throw new AstroError(`找不到以下物品图标: ${result}`);

const baseIcon = useIcon(base.item)!;
const additionIcon = useIcon(addition.item)!;
---

<div class="relative mb-1 w-80 h-[180px] origin-top-left md:scale-100 scale-90">
  <Image src={table} alt={alt} class="!bg-transparent" />
  <div class="absolute top-[99px] left-[39px]">
    <SingleItem
      src={baseIcon.smallIcon}
      title={baseIcon.name}
      id={baseIcon.registerName}
    />
  </div>
  <div class="absolute top-[99px] left-[138px]">
    <SingleItem
      src={additionIcon.smallIcon}
      title={additionIcon.name}
      id={additionIcon.registerName}
    />
  </div>
  <div class="absolute top-[99px] left-[254px]">
    <SingleItem src={resultIcon.smallIcon} title={resultIcon.name} />
  </div>
</div>
